<template>
	<view class="content">
		<u-navbar ref="navbar" title="社群空间" leftIconColor="#ffffff" bgColor="transparent" autoBack='true'></u-navbar>
		<image :src="baseurl+'association/bg.png'" class="bg"></image>
		<scroll-view scroll-y="true" class="infoBox" @scrolltolower="getMore">
			<view class="itemBox" v-for="(item, index) in spaceList" :key="item.id">
				<view class="swiperBox">
					<swiper class="swiper-item" circular='true' :interval="3000" :duration="1000"
						@change="handleSwiperChange(index, $event)" :current="currentSwiper[index]">
						<swiper-item class="swiper-item" v-for="(banner, bannerIdx) in item.slideshow" :key="bannerIdx">
							<image :src="banner" class="itemImg"></image>
							<!-- <text class="swiperTitle">{{banner.name}}</text> -->
						</swiper-item>
					</swiper>
					<view class="custom-indicator">
						<view class="indicator-dot" v-for="(dot, dotIdx) in item.slideshow.length" :key="dotIdx"
							:class="{ 'active': dotIdx === currentSwiper[index] }"></view>
					</view>
				</view>
				<view class="nameBox">
					<text class="name">{{item.name}}</text>
					<text class="area">面积：{{item.area}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				spaceList: [],
				currentSwiper: [],
				page: 1,
				haveMore: true,
				infoBoxHeight: 0, // 用于存储计算后的高度
				navbarHeight: 0, // 导航栏高度
				pageHeight: 0 // 页面高度
			}
		},
		onLoad() {
			this.getPageHeight();
			this.getData();
		},
		onReady() {
			this.getNavbarHeight();
		},
		methods: {
			getPageHeight() {
				const res = uni.getSystemInfoSync();
				this.pageHeight = res.windowHeight;
				this.calcInfoBoxHeight();
			},
			getNavbarHeight() {
				this.navbarHeight = this.$refs.navbar.height || 44;
				this.calcInfoBoxHeight();
			},
			calcInfoBoxHeight() {
				if (this.pageHeight && this.navbarHeight) {
					const rpxToPx = (rpx) => {
						const res = uni.getSystemInfoSync();
						return (rpx * res.windowWidth) / 750;
					};
					const subtractHeight = rpxToPx(30);
					this.infoBoxHeight = this.pageHeight - this.navbarHeight - subtractHeight;
				}
			},
			getMore() {
				console.log("滚动");
				if (this.haveMore) {
					this.page++;
					this.getData();
				} else {
					this.$toast({
						title: '暂无更多数据'
					})
				}
			},
			getData() {
				this.$request.get(`CommunitySpace/community_space_list?page=${this.page}`).then(res => {
					const newData = res.data.data || [];
					if (newData.length == 0) {
						this.haveMore = false;
					}
					this.spaceList.push(...newData);
					newData.forEach(() => {
						this.currentSwiper.push(0);
					});
				})
			},
			handleSwiperChange(index, e) {
				// 确保index在有效范围内再赋值
				if (index >= 0 && index < this.currentSwiper.length) {
					this.$set(this.currentSwiper, index, e.detail.current);
				}
			}
		}
	}
</script>

<style lang="scss">
	/* 移除原有infoBox的固定高度设置 */
	.infoBox {
		position: relative;
		margin-top: 30rpx;
		width: 676rpx;
		height: 80vh;
		margin-left: 37rpx;
		overflow-y: scroll;
		/* 高度由JS动态计算，此处不设置固定值 */
	}

	/* 其他样式保持不变 */
	.itemBox {
		width: 100%;
		margin-bottom: 70rpx;

		.nameBox {
			margin-top: 45rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 55rpx;
			border-bottom: 1rpx solid #D9D9D9;

			.area {
				font-size: 24rpx;
				font-weight: 500;
			}

			.name {
				font-size: 28rpx;
				font-weight: 700;
			}
		}

		&:last-child .nameBox {
			border-bottom: none;
		}
	}

	.swiperBox {
		position: relative;
		width: 674rpx;
		height: 385rpx;

		.custom-indicator {
			position: absolute;
			bottom: 25rpx;
			right: 35rpx;
			display: flex;
			gap: 10rpx;
			padding: 5rpx 10rpx;
			border-radius: 20rpx;
		}

		.indicator-dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
			background-color: transparent;
		}

		.indicator-dot.active {
			background-color: #FFFFFF;
			width: 30rpx;
			border-radius: 6rpx;
		}

		.swiper-item,
		.itemImg {
			width: 100%;
			height: 385rpx;
		}

		.swiperTitle {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			margin-top: 20rpx;
			color: #fff;
			position: relative;
			z-index: 1;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 477rpx;
	}

	.u-navbar {
		background-color: transparent !important;

		&::after {
			display: none !important;
		}

		.u-navbar__border {
			display: none !important;
		}
	}

	.u-icon__icon {
		color: #fff !important;
	}

	.u-title {
		color: #fff !important;
	}

	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;
		background: url('https://miantou.guguan.net/img/common/bg.png');
		background-size: 100% auto;
	}
</style>